<template>
	<div>
		<template v-for="user in users">
					{{ user.username }}
					{{ user.password }}
					{{ user.enabled }}
					{{ user.sex }}
					{{ user.roles }}
					{{ user.lastLoginTime }}
				</template>

		<v-hover v-slot:default="{ hover }"   transition="slide-y-transition">
			<v-card class="mx-3 px-3 mt-12">    <!--表格-->
				<v-expand-transition>
					<zzofferset :offset="hover ? 25 : 10">
						<v-card color="primary" class="title " :elevation="10" dark>
							{{user_label}}列表	<!-- v-icon -->
						</v-card>
					</zzofferset>
				</v-expand-transition>
				<v-container class="mt-n8" grid-list-md>
					<v-row class="mx-0" align="center" justify="end">
						<v-btn color="primary" large outlined @click="userToAdd">
							<v-icon left>add</v-icon>添加
						</v-btn>
						<v-btn color="primary" large outlined @click="userPage" class="mx-5">
							<v-icon left>search</v-icon>查询
						</v-btn>
					</v-row>
					<!--查询条件-->
					<v-layout wrap>
						<v-flex xs6 sm3 md2>
							<zzdate hide-details v-model="user_pagein.startTimes" label="起始时间"></zzdate>
						</v-flex >
						<v-flex xs6 sm3 md2>
							<zzdate hide-details v-model="user_pagein.endTimes" label="结束时间" :allowedDates="zz.fun_dateCompare(user_pagein.startTimes,false,true)"></zzdate>
						</v-flex >
																				<v-flex xs6 sm3 md2>
																	<zzinput hide-details clearable v-model="user_pagein.username" :label="user_labels.username"></zzinput>
															</v-flex>
																											<v-flex xs6 sm3 md2>
																	<zzinput hide-details clearable v-model="user_pagein.password" :label="user_labels.password"></zzinput>
															</v-flex>
																											<v-flex xs6 sm3 md2>
																	<zzselect hide-details clearable v-model="user_pagein.enabled" :label="user_labels.enabled" :items="items_boolean"></zzselect>
															</v-flex>
																											<v-flex xs6 sm3 md2>
																	<zzselect hide-details clearable v-model="user_pagein.sex" classname="EnumSex" :label="user_labels.sex"></zzselect>
															</v-flex>
																											<v-flex xs6 sm3 md2>
																	<v-text-field hide-details clearable v-model="user_pagein.roles" :label="user_labels.roles"></v-text-field>
															</v-flex>
																															</v-layout>
				</v-container>
				<v-divider></v-divider>
				<!--表格-->
				<v-data-table
						:headers="user_headers"
						:items="users"
						:server-items-length="user_total"
						:loading="user_loading"

						:page.sync="user_pagein.curr"
						:items-per-page.sync="user_pagein.size"
						:sort-by.sync="user_pagein.sortProps"
						:sort-desc.sync="user_pagein.sortDesc"
						multi-sort
				>
																																																				<template v-slot:item.enabled="{ item }">
								<zzspan :value="item.enabled"></zzspan>
							</template>
																								<template v-slot:item.sex="{ item }">
								<zzspanDict :value="item.sex" classname="EnumSex"></zzspanDict>
							</template>
																																																		<template v-slot:item.action="{ item }">
						<v-btn color="primary" outlined class="mr-2" @click="userToEdit(item)">
							<v-icon left>edit</v-icon>
							编辑
						</v-btn>
						<v-menu offset-x>
							<template v-slot:activator="{ on }">
								<v-btn small color="warning" v-on="on" outlined class="pa-0">
									<v-icon>delete</v-icon>
								</v-btn>
							</template>
							<v-btn small color="warning" outlined @click="userDelete(item)">
								确认删除
							</v-btn>
						</v-menu>
					</template>
				</v-data-table>
			</v-card>
		</v-hover>
		<!--编辑框-->
		<v-dialog v-model="user_dialog" max-width="600px">
			<v-card :loading="user_loading">
				<v-card-title class="headline grey lighten-4" primary-title>
					{{ user_opt + ' ' + user_label }}
				</v-card-title>
				<v-card-text>
					<v-form ref="user_form">
						<v-container grid-list-md>
							<v-layout wrap>
																	<v-flex xs12 sm6 md4>
																					<v-text-field v-model="user_form.username" :label="user_labels.username" :rules="[]"></v-text-field>
																			</v-flex>
																	<v-flex xs12 sm6 md4>
																					<v-text-field v-model="user_form.password" :label="user_labels.password" :rules="[]"></v-text-field>
																			</v-flex>
																	<v-flex xs12 sm6 md4>
																					<zzcheckbox v-model="user_form.enabled" :label="user_labels.enabled" :rules="[]"></zzcheckbox>
																			</v-flex>
																	<v-flex xs12 sm6 md4>
																					<zzselect v-model="user_form.sex" classname="EnumSex" :label="user_labels.sex" :rules="[]"></zzselect>
																			</v-flex>
																	<v-flex xs12 sm6 md4>
																					<v-text-field v-model="user_form.roles" :label="user_labels.roles" :rules="[]"></v-text-field>
																			</v-flex>
																	<v-flex xs12 sm6 md4>
																													</v-flex>
															</v-layout>
						</v-container>
					</v-form>
				</v-card-text>
				<v-divider></v-divider>
				<v-card-actions class="pa-0 d-inline">
					<v-row class="pa-0 ma-0">
						<v-col class="pa-0">
							<v-btn x-large block text @click="user_dialog = false">取消</v-btn>
						</v-col>
						<v-col class="pa-0">
							<v-btn color="primary" x-large block text @click="userAdd" v-if="user_opt === '添加'">{{user_opt}}</v-btn>
							<v-btn color="primary" x-large block text @click="userUpdate" v-else :disabled="user_loading">{{user_opt}}</v-btn>
						</v-col>
					</v-row>
				</v-card-actions>
			</v-card>
		</v-dialog>
	</div>
</template>

<script>
	const user_headers = [
					{text: '用户名', value: 'username',sortable: false,},
					{text: '密码', value: 'password',sortable: false,},
					{text: '是否可用', value: 'enabled',sortable: false,},
					{text: '性别', value: 'sex',sortable: false,},
					{text: 'roles', value: 'roles',sortable: false,},
					{text: '最后登录时间', value: 'lastLoginTime',sortable: true,},
				{text: '', value: 'action', sortable: false,},// align: 'center',
	]
	export default {
		name: 'crud',
		data: () => ({
				user_label: '用户', //中文名(标题)
				user_loading: false,//正在请求数据loading
				user_new: {	//新建时的默认值
																																	},
		user_headers: user_headers,
				user_labels: zz.listToMap(user_headers, 'value', 'text'),//字段名
				user_pagein: {
		curr: 1,//当前页码
				size: 10,//一页几行
				sortProps: [],//排序字段 List<String>
				sortDesc: [],//是不是倒序 List<Boolean>
				startTimes: new Date().zzaddDay(-7).zzdate(),
				endTimes: null,
	},
		users: [],		//列表
				user_total: 0,//总行数
				user_dialog: false,//弹窗是否显示
				user_opt: null,//添加 / 编辑
				user_formold: {},//暂存
		user_form: {},	//当前对象
	// user_selected: [],
	}),
	computed: {},
	watch: {},
	created() {
		this.asyncCreated()
	},
	methods: {
		async asyncCreated() {
			await this.userPage()
		},
		//分页查询
		async userPage() {
			await this.zztry('user_loading', async () => {
				let page = await zz.page('user', this.user_pagein)
				this.users = page.content
				this.user_total = page.total
			})
		},
		async userOne() {
			await this.zztry('user_loading', async () => {
				this.user_form = await zz.one('user', this.user_form)
				this.users.unshift(this.user_form)
				this.user_dialog = false
			})
		},
			userToAdd() {
			this.user_form = {...this.user_new}
			this.user_opt = '添加'
			this.user_dialog = true
		},
			userToEdit(user) {
			this.user_formold = user
					this.user_form = {...user}
			this.user_opt = '编辑'
			this.user_dialog = true
		},
		async userAdd() {
			await this.zztry('user_loading', async () => {
				if (this.$refs.user_form.validate()) {
					this.user_form.id = await zz.add('user', this.user_form)
					this.users.unshift(this.user_form)
					this.user_dialog = false
				}
			})
		},
		async userDelete(user) {
			await this.zztry('user_loading', async () => {
				await zz.delete('user', user.id)
				this.users.remove(user)
			})
		},
		async userUpdate() {
			await this.zztry('user_loading', async () => {
				if (this.$refs.user_form.validate()) {
					await zz.update('user', this.user_form)
					let index = this.users.indexOf(this.user_formold)
					this.users.splice(index, 1, this.user_form)
					this.user_dialog = false
				}
			})
		},
	},
	}
</script>
<!--<style scoped lang="scss">-->

<!--</style>-->
